<template>
    <div class="page">
        <!-- <div class="msgTop"></div> -->
        <div class="userInfo">
            <img src="../../../images/组 124@3x.png">
            <span>{{userName}}</span>
        </div>
        <div class="routerWapper">
            <div class="flex flexSpaceB h45 vux-1px-b" @click="toNext('addressMangeSet',{type:1})">
                <span class="fs16 ml4">管理地址</span>
                <div>
                    <x-icon type="ios-arrow-forward" size="20"></x-icon>
                </div>
            </div>
            <div class="flex flexSpaceB h45 vux-1px-b" @click="updateName('name')">
                <span class="fs16 ml4">姓名</span>
                <div class="flex flexCenter">
                    <span class="mr4 gary">{{userName}}</span>
                    <x-icon type="ios-arrow-forward" size="20"></x-icon>
                </div>
            </div>
            <div class="flex flexSpaceB h45 vux-1px-b" @click="updateName('nick')">
                <span class="fs16 ml4">昵称</span>
                <div class="flex flexCenter">
                    <span class="mr4 gary">{{nickName}}</span>
                    <x-icon type="ios-arrow-forward" size="20"></x-icon>
                </div>
            </div>
            <div class="flex flexSpaceB h45 vux-1px-b">
                <span class="fs16 ml4">手机号</span>
                <div class="flex flexCenter">
                    <span class="mr4 gary">{{telNum}}</span>
                    <x-icon type="ios-arrow-forward" size="20"></x-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getUserInfo,updateUserInfo } from "request";
import { Toast,MessageBox } from 'mint-ui';
import mixins from 'mixins'
export default {
    name:'userSetting',
    mixins:[mixins],
    data(){
        return {
            userName: '',
            telNum: '',
            nickName: '',

            testNum:0
        }
    },
    created(){
        this.$store.commit('increment',"用户设置");
        this.getUserInfo();
    },
    methods:{
        getUserInfo(){
            this.$vux.loading.show({ text: 'Loading' })
            getUserInfo({}).then(res=>{
                this.$vux.loading.hide()
                if(res.rspCode=='0000'){  
                    this.userName = res.data.name
                    this.telNum = res.data.phone
                    this.nickName = res.data.nickName 
                }else{
                    Toast({ message: '信息获取失败',position: 'middle', duration: 1000 });
                }
            })
        },
        updateName(val){
            var is = val === "name"?true:false;
            var title = is ? "请输入姓名" : "请输入昵称";
            var inputValue = is ? this.userName : this.nickName;
            MessageBox.prompt( title, '', {inputValue:inputValue} ).then(({ value, action }) => {
                var value = value.trim(),len = value.length;
                if(value == inputValue){
                    return;
                }
                if(is && (len < 2 || len > 15)){
                    Toast({message: '姓名请输入2-15个字符',duration: 1000});
                    return;
                }
                if(!is && (len <4 || len > 20)){
                    Toast({message: '昵称请输入4-20个字符',duration: 1000});
                    return;
                }
                var params = is ? {name:value} : {nickName:value};
                updateUserInfo(params).then(res=>{
                    if(res.rspCode === "0000"){
                        Toast({message: '修改成功',duration: 1000});
                        this.getUserInfo();
                    }else{
                        Toast({message: '修改失败',duration: 1000});
                    }
                })
            },()=>{

            });
        },
        test(){

        }
    },
}
</script>
<style scoped lang="less">
@import "~src/components/css/gloState.less";
.vux-x-icon {
  fill: #c7c6cb;
}
.page{
    position: absolute;
    top: 0px;
    bottom:0px;
    box-sizing:border-box;
    width: 100%;
    height: 100%;
    background-color:#f1f2f3;
    .msgTop{
        width: 100%;
        height: 130px;
        background:white;
    }
    .userInfo{
        width:100%;
        height:12rem;
        display:flex;
        align-items: center;
        padding-bottom:1rem;
        background: url(../../../images/Rectangle309@2x.png) no-repeat;
        &>img{
            width:7rem;
            margin-left:1.5rem;
            margin-right:1rem;
        }
        span{
            font-size:18px;
            color:white;
            font-weight:600;
        }
    }
    .routerWapper{
        width: 88%;
        margin: -2rem auto 0rem;
        padding: 10px;
        background: #ffffff;
        border-radius: 15px;
        box-shadow:0px 0px 10px 0px #cccccc;
    }
}
.gary{
    color:#666666;
}
</style>
